<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <!-- 左侧的插槽 -->
      <template #left>
        <div class="logo"></div>
      </template>

      <!-- 右侧的插槽 -->
      <template #right>
        <van-button @click="$router.push('/search')" round icon="search" type="primary">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <van-tabs v-model="active">
      <!-- title就是显示的名字 -->
      <van-tab v-for="item in myList" :key="item.id" :title="item.name">
        <!-- 新闻列表 -->
        <article-list :channel_id="item.id" />
      </van-tab>
      <!-- 图标，加点击事件 -->
      <div @click="$refs.channelEdit.show = true" class="icon-box">
        <van-icon name="wap-nav" />
      </div>
    </van-tabs>

    <!-- 频道管理区域 -->
    <!-- 
      $event如果用在原生标签代表事件对象
      $event如果用在组件里代表子组件传递过来的数据
     -->
    <!-- <channel-edit
      ref="channelEdit"
      :myList="myList"
      :allList="allList"
      :value="active"
      @input="active = $event"
    /> -->

    <!-- 
      v-model的本质其实就是一个语法糖
        就是少量代码能给你生成比较多的代码就叫语法糖

      如果你写 v-model="数据"，他会自动帮你生成两句话
        :value="数据" 以及 @input="数据 = $event"

      所以例如这里写了 v-model="active",他生成
        :value="active" 以及 @input="active = $event"
      
      注意：因为他只是生成 :value="数据" 这种父传子
      以及 @input="数据 = $event" 这种子传父
      所以就意味着，父传子时，子里的prop必须要叫value
      以及父传子时自定义事件名一定要叫input
     -->
    <channel-edit
      ref="channelEdit"
      :myList="myList"
      :allList="allList"
      v-model="active"
    />
  </div>
</template>

<script>
// 导入封装的接口
import { myChannelsAPI, allChannelsAPI } from "@/api/channels";
// 导入
import ArticleList from "./ArticleList.vue";
import ChannelEdit from "./ChannelEdit.vue";
export default {
  // 给组件起名
  // 作用：可以在开发者工具里根据名字快速找到这个组件
  name: "home",
  components: {
    ArticleList,
    ChannelEdit,
  },
  destroyed() {
    console.log('home销毁了')
  },
  data() {
    return {
      // 双向绑定频道栏的选中下标
      active: 0,
      // 保存用户自己的频道
      myList: [],
      // 保存所有频道
      allList: [],
    };
  },

  async created() {
    // 1. 获取用户自己的频道
    // // 判断是否登录
    // if (this.$store.state.tokenObj.token) {
    //   // 登录了发请求
    //   const res1 = await myChannelsAPI();
    //   this.myList = res1.data.channels;
    // } else {
    //   // 获取本地存储
    //   const local = JSON.parse(localStorage.getItem("hmtt89-channels"));
    //   // local为true就代表有
    //   if (local) {
    //     this.myList = local;
    //   } else {
    //     // 本地存储没有
    //     const res1 = await myChannelsAPI();
    //     this.myList = res1.data.channels;
    //   }
    // }

    // 经过分析发现要么登录了，要么本地存储没数据都要发请求，因此优化如下
    // 需要先获取一下本地存储
    const local = JSON.parse(localStorage.getItem("hmtt89-channels"));
    if (this.$store.state.tokenObj.token || !local) {
      // 本地存储没有
      const res1 = await myChannelsAPI();
      this.myList = res1.data.channels;
    }else {
      // 剩余情况那都是从本地存储取出来
      this.myList = local
    }

    // 2. 获取所有的频道
    const res2 = await allChannelsAPI();
    this.allList = res2.data.channels;
  },
};
</script>

<style scoped lang="less">
.van-nav-bar {
  .logo {
    width: 120px;
    height: 50px;
    // win7用户，脚手架是4的版本
    // 恭喜你中奖了，脚手架4里无法在css样式中直接用@符号，会报错
    // 因为脚手架4还不够智能，他无法区分这个@是src还是声明变量
    // 所以脚手架4里要用~@来告诉编译器，这就是代表src目录，而不是声明变量
    // 脚手架5也加~@会报错吗？不会报错，他既支持直接写@，也支持写~@
    // 对于懒人而言可以这么记：在样式中要代表src目录就要写 ~@
    // 总结：脚手架5可以直接写@也可以写~@，脚手架4必须写~@
    background: url(~@/assets/logo.png) no-repeat center / contain;
  }

  .van-button {
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;

    .van-icon {
      color: #fff;
    }
  }
}

.van-tabs {
  ::v-deep .van-tabs__wrap {
    position: absolute;
    left: 0;
    right: 30px;
  }

  .icon-box {
    position: absolute;
    right: 0;
    top: 3px;
    .van-icon {
      font-size: 30px;
    }
  }
}
</style>